<template>
  <div class="hort">
    <div class="text">
        <span> &nbsp;&nbsp;&nbsp;热门搜索</span>
    </div>
    <div class="bs">
        <div class="divbox">
            <ul >
                <li @click="click(item.keyword)" v-for="(item, index) in hortDat" :key="index">{{item.keyword           }}</li>
            </ul>
        </div>
    </div>
    <div class="history"></div>
    <div class="text">
        <span> &nbsp;&nbsp;&nbsp;历史记录</span>
        <img @click="del()" src="https://res.suning.cn/project/search/wap/search/style/search/images/del.png" alt="">

    </div>
    <div class="histoy">
        <div class="bs">
            <div class="divbox">
                <ul>
                    <li @click="click(item)" v-for="(item, index) in history" :key="index">{{item}}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="divs"></div>
  </div>
</template>

<script>
import { SearchData } from '@/api/index.js'

export default {
    data() {
        return {
            hortDat: [],
            history: [],
        }
    },
    mounted() {
        SearchData().then((ok) => {
            // console.log(ok);
            this.hortDat = ok.data.data;
            var arrs = [];
            //过滤没有keyword属性的元素
            for (let i = 0; i < this.hortDat.length; i++){
                if (this.hortDat[i].keyword) {
                    arrs.push(this.hortDat[i]);
                }
            }
            this.hortDat = arrs;
            // console.log(arrs)
            this.history = this.$store.state.history;
        })
    },
    methods: {
        click(word) {
            this.$router.push({ path: '/Search/SearchSort', query: { word: word } })
            this.$store.commit("PushHistory", word);
            // console.log(this.$store.state.history);
            this.history = this.$store.state.history;
            // console.log(this.history);
        },
        del() {
            this.$store.commit('DelHistory')
            this.history = [];
        }
    },
    
}
</script>

<style lang="scss" scoped>
.hort{
    width: 100%;
    height: 100%;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    .text{
    box-sizing: border-box;
    background-color: #ffffff;
    width: 100%;
    // height: 0.44rem;
    font-size: 0.15rem;
    display: flex;
        span{
            margin-top: 0.24rem;
        }
        img{
            width: 0.1rem;
            height: 0.15rem;
            margin-top: 0.26rem;
            margin-left: 2.78rem;
        }
    }
    .bs{
        width: 100%;
        background-color: #ffffff;
        .divbox {
                width: 95%;
                // height: 3.86rem;
                margin: 2.5%;
                background-color: #ffffff;
                ul{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: start;
                    li {
                        margin: 0rem 0.059rem;
                        margin-top: 0.12rem;
                        margin-bottom: 0.12rem;
                        font-size: 0.13rem;
                        width: 30%;
                        height: 0.31rem;
                        background-color: #e3e3e3;
                        text-align: center;
                        line-height: 0.31rem;
                        border-radius: 0.04rem;
                    }
                }
            }
    }
    .divs{
        width: 100%;
        height: 4rem;
    }
    
}
</style>